<template>
    <div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            

            <el-form-item label="账号" prop="LoginName">
                <el-input v-model="ruleForm.LoginName"></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="LoginPwd">
                <el-input v-model="ruleForm.LoginPwd"></el-input>
            </el-form-item>
            <el-form-item label="再次输入密码" prop="UserName">
                <el-input v-model="ruleForm.UserName"></el-input>
            </el-form-item>
            
           
           
           
            <el-form-item>
                <el-tooltip class="item" effect="dark" content="修改数据" placement="top-start">
                <el-button type="primary" icon="el-icon-edit" circle @click="submitForm('ruleForm')"></el-button>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="清空数据" placement="right-start">
                <el-button type="danger" icon="el-icon-delete" @click="resetForm('ruleForm')"></el-button>
            </el-tooltip>
            </el-form-item>
        </el-form>


  
  
    </div>
    
</template>

<script>
import { mapState,mapMutations } from 'vuex'
export default {
    name:'add',
    data(){
        return {
          
            ruleForm: {
                UserID:0,
                LoginName: "",               
                LoginPwd: "",              
                UserName: "",
               
            },
            rules: {
                
                
               
                
            }
        }
    },
    props: {
       xian: Boolean,
      
    },
    computed:{
        ...mapState(['user'])
    },
    methods:{
        ...mapMutations(['setUser']),
        submitForm(formName) {
            //先验证表单数据
            this.$refs[formName].validate((valid) => {
                if (valid) {
                  
                    if(this.ruleForm.LoginPwd==this.ruleForm.UserName){
               this.axios({
                method:'PUT',
                url:'User/gai1',
                data:this.ruleForm
            }).then(res=>{
                if(res.code>0){
                 
                  this.$emit('update:xian',false)
                    this.$message({ type:'success', message:res.msg})
                    sessionStorage.clear();
                    this.setUser({
                        Roles: '',
                        Token: '',
                        UserId: 0,
                        UserName: '',
                        Exp: '',
                        ImgPath: ''
                    });
                    location.href = "/login"

                }else{
                    this.$message({ type:'danger', message:res.msg})
                }
            })
        }else{
            alert("密码不一致")
        }
                } else {
                    console.log('error submit!!');
                    return false;
                }
           
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
       
    },
    created(){  
        console.log(this.user.UserId)     
        this.ruleForm.UserID=this.user.UserId
    },
   
}
</script>

<style scoped>

</style>